<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 基础 | fengrixin</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <script>
         (function(){
            var html = document.createElement('script');
            html.src = 'https://www.googletagmanager.com/gtag/js?id=UA-166891571-1';
            var script = document.getElementsByTagName('script')[0]'
            script.parentNode.insertBefore(html, script);
            
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments)}
            gtag('js', new Date());
            gtag('config', 'UA-166891571-1');
         })();
        </script>
    <meta name="description" content="I don't know anything with certainty, but seeing the stars makes me dream.">
    <meta name="keywords" content="冯日新, fengrixin, rixin, 飘渺云轩">
    <meta name="author" content="rixin, s2675563468, fengrixin@yeah.net">
    <meta name="copyright" content="rixin">
    <meta name="renderer" content="webkit">
    
    <link rel="preload" href="/assets/css/0.styles.52cdc27a.css" as="style"><link rel="preload" href="/assets/js/app.0696c23a.js" as="script"><link rel="preload" href="/assets/js/2.96f039f8.js" as="script"><link rel="preload" href="/assets/js/13.dce50cfa.js" as="script"><link rel="prefetch" href="/assets/js/10.473b7d15.js"><link rel="prefetch" href="/assets/js/11.0c193dec.js"><link rel="prefetch" href="/assets/js/12.c4d9d484.js"><link rel="prefetch" href="/assets/js/14.eecb5cc3.js"><link rel="prefetch" href="/assets/js/15.e0473034.js"><link rel="prefetch" href="/assets/js/16.25b14741.js"><link rel="prefetch" href="/assets/js/17.c016c8f3.js"><link rel="prefetch" href="/assets/js/18.71195568.js"><link rel="prefetch" href="/assets/js/19.1dfd44c0.js"><link rel="prefetch" href="/assets/js/20.abde37ca.js"><link rel="prefetch" href="/assets/js/21.af59917b.js"><link rel="prefetch" href="/assets/js/22.d2f7b52b.js"><link rel="prefetch" href="/assets/js/23.ec5c07a5.js"><link rel="prefetch" href="/assets/js/24.eae97f7d.js"><link rel="prefetch" href="/assets/js/25.2f09818a.js"><link rel="prefetch" href="/assets/js/26.7ae2d77c.js"><link rel="prefetch" href="/assets/js/27.a3963c70.js"><link rel="prefetch" href="/assets/js/28.eadcc4e5.js"><link rel="prefetch" href="/assets/js/29.61cf8d1d.js"><link rel="prefetch" href="/assets/js/3.dd8204a7.js"><link rel="prefetch" href="/assets/js/30.7db889fa.js"><link rel="prefetch" href="/assets/js/31.fb075f3c.js"><link rel="prefetch" href="/assets/js/4.cf123337.js"><link rel="prefetch" href="/assets/js/5.abe0fc83.js"><link rel="prefetch" href="/assets/js/6.d9ded6eb.js"><link rel="prefetch" href="/assets/js/7.a054e416.js"><link rel="prefetch" href="/assets/js/8.f0b3a07f.js"><link rel="prefetch" href="/assets/js/9.f6495dca.js">
    <link rel="stylesheet" href="/assets/css/0.styles.52cdc27a.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">fengrixin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="地基" class="dropdown-title"><span class="title">地基</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/algorithm/" class="nav-link">数据结构和算法</a></li><li class="dropdown-item"><!----> <a href="/learn/browser/" class="nav-link">浏览器工作原理</a></li><li class="dropdown-item"><!----> <a href="/learn/js/es6.html" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/learn/css/" aria-current="page" class="nav-link router-link-exact-active router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/learn/html/" class="nav-link">HTML</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="楼层" class="dropdown-title"><span class="title">楼层</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/vue/" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/learn/node/" class="nav-link">Node.js</a></li><li class="dropdown-item"><!----> <a href="/learn/mini/index.html" class="nav-link">小程序</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="电梯" class="dropdown-title"><span class="title">电梯</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/tools/chain.html" class="nav-link">工具链</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/publish.html" class="nav-link">发布系统</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/monitor.html" class="nav-link">监控系统</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="看一看" class="dropdown-title"><span class="title">看一看</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>仓库</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/watch/repository.html" class="nav-link">第三方库</a></li><li class="dropdown-subitem"><a href="/watch/website.html" class="nav-link">好玩的网站</a></li><li class="dropdown-subitem"><a href="/watch/article.html" class="nav-link">牛掰的文章</a></li><li class="dropdown-subitem"><a href="/watch/plugin.html" class="nav-link">扩展&amp;插件</a></li></ul></li><li class="dropdown-item"><h4>作品</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="http://www.5you.com/apk/384161.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微冷知识
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/fengrixin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="地基" class="dropdown-title"><span class="title">地基</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/algorithm/" class="nav-link">数据结构和算法</a></li><li class="dropdown-item"><!----> <a href="/learn/browser/" class="nav-link">浏览器工作原理</a></li><li class="dropdown-item"><!----> <a href="/learn/js/es6.html" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/learn/css/" aria-current="page" class="nav-link router-link-exact-active router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/learn/html/" class="nav-link">HTML</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="楼层" class="dropdown-title"><span class="title">楼层</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/vue/" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/learn/node/" class="nav-link">Node.js</a></li><li class="dropdown-item"><!----> <a href="/learn/mini/index.html" class="nav-link">小程序</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="电梯" class="dropdown-title"><span class="title">电梯</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/tools/chain.html" class="nav-link">工具链</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/publish.html" class="nav-link">发布系统</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/monitor.html" class="nav-link">监控系统</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="看一看" class="dropdown-title"><span class="title">看一看</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>仓库</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/watch/repository.html" class="nav-link">第三方库</a></li><li class="dropdown-subitem"><a href="/watch/website.html" class="nav-link">好玩的网站</a></li><li class="dropdown-subitem"><a href="/watch/article.html" class="nav-link">牛掰的文章</a></li><li class="dropdown-subitem"><a href="/watch/plugin.html" class="nav-link">扩展&amp;插件</a></li></ul></li><li class="dropdown-item"><h4>作品</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="http://www.5you.com/apk/384161.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微冷知识
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/fengrixin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/learn/css/" aria-current="page" class="active sidebar-link">CSS 基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/css/#语法" class="sidebar-link">语法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/css/#普通规则" class="sidebar-link">普通规则</a></li><li class="sidebar-sub-header"><a href="/learn/css/#at-规则" class="sidebar-link">at 规则</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/css/#选择器-2" class="sidebar-link">选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/css/#简述" class="sidebar-link">简述</a></li><li class="sidebar-sub-header"><a href="/learn/css/#解析方式" class="sidebar-link">解析方式</a></li><li class="sidebar-sub-header"><a href="/learn/css/#选择器权重" class="sidebar-link">选择器权重</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/css/#盒子模型" class="sidebar-link">盒子模型</a></li><li class="sidebar-sub-header"><a href="/learn/css/#布局" class="sidebar-link">布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/css/#常见布局" class="sidebar-link">常见布局</a></li><li class="sidebar-sub-header"><a href="/learn/css/#flex-布局" class="sidebar-link">flex 布局</a></li><li class="sidebar-sub-header"><a href="/learn/css/#网格布局" class="sidebar-link">网格布局</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/css/#非布局样式" class="sidebar-link">非布局样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/css/#字体" class="sidebar-link">字体</a></li><li class="sidebar-sub-header"><a href="/learn/css/#行高" class="sidebar-link">行高</a></li><li class="sidebar-sub-header"><a href="/learn/css/#背景" class="sidebar-link">背景</a></li><li class="sidebar-sub-header"><a href="/learn/css/#边框" class="sidebar-link">边框</a></li><li class="sidebar-sub-header"><a href="/learn/css/#滚动" class="sidebar-link">滚动</a></li><li class="sidebar-sub-header"><a href="/learn/css/#换行" class="sidebar-link">换行</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/css/#效果属性" class="sidebar-link">效果属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/css/#box-shadow-投影" class="sidebar-link">box-shadow：投影</a></li><li class="sidebar-sub-header"><a href="/learn/css/#text-shadow-投影-文字" class="sidebar-link">text-shadow：投影-文字</a></li><li class="sidebar-sub-header"><a href="/learn/css/#border-radius-边框圆角" class="sidebar-link">border-radius： 边框圆角</a></li><li class="sidebar-sub-header"><a href="/learn/css/#background-背景" class="sidebar-link">background：背景</a></li><li class="sidebar-sub-header"><a href="/learn/css/#clip-path-裁剪" class="sidebar-link">clip-path：裁剪</a></li><li class="sidebar-sub-header"><a href="/learn/css/#transform-变换" class="sidebar-link">transform：变换</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/css/#预处理器" class="sidebar-link">预处理器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/css/#scss" class="sidebar-link">scss</a></li><li class="sidebar-sub-header"><a href="/learn/css/#less" class="sidebar-link">less</a></li></ul></li></ul></li><li><a href="/learn/css/magic.html" class="sidebar-link">神奇的 CSS</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="语法"><a href="#语法" class="header-anchor">#</a> 语法</h2> <p>CSS 的顶层样式表由两种规则组成的规则列表构成，一种被称为 at-rule，也就是 at 规则；另一种是 qualified rule，也就是普通规则。</p> <ul><li>at-rule 由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束。</li> <li>普通 CSS 规则，也就是我们所熟知的，由选择器和属性指定构成的规则。</li></ul> <h3 id="普通规则"><a href="#普通规则" class="header-anchor">#</a> 普通规则</h3> <p>qualified rule 主要由选择器和声明区块构成。声明区块又由属性和值构成。</p> <p><img src="https://img.kancloud.cn/26/9c/269ce6b81e4f1d9e3f326f17dfa43c55_533x230.png" alt="普通规则"></p> <h4 id="选择器"><a href="#选择器" class="header-anchor">#</a> 选择器：</h4> <p><img src="https://static001.geekbang.org/resource/image/8b/7c/8bdd0a249ab1dbf8b854b2decd7eb87c.png" alt=""> <img src="https://static001.geekbang.org/resource/image/4f/67/4fa32e5cf47c72a58f7a8211d4e8fc67.png" alt=""></p> <p>从语法结构可以看出任何选择器都是由几个符号结构连接的：空格、大于号、加号、波浪线、双竖线（这里需要注意一下，空格，即为后代选择器的优先级较低）。</p> <p>然后对每一个选择器来说，如果它不是伪元素的话，由几个可选的部分组成：标签类型、id、class、属性和伪类，它们中只要出现一个，就构成了选择器</p> <p>如果它是伪元素，则在这个结构之后追加伪元素。只有伪类可以出现在伪元素之后。</p> <hr> <h4 id="声明-属性和值"><a href="#声明-属性和值" class="header-anchor">#</a> 声明：属性和值</h4> <blockquote><p>声明部分是由「属性：值」组成的序列</p></blockquote> <ol><li>属性
是中划线、下划线、字母等组成的标识符，CSS 还支持反斜杠转义。
需要注意的是：属性不允许使用连续的两个中划线开头，这样的属性会被认为是 CSS 变量</li></ol> <p>在 CSS Variables 标准中，以双中划线开头的属性被当做变量，与之配合的则是 var 函数：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">:root</span><span class="token punctuation">{</span>
    <span class="token property">--main-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
    <span class="token property">--accent-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.content</span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>值
<ul><li>CSS 范围的关键字：initial, unset, inherit, 任何属性都可以的关键字</li> <li>字符串</li> <li>URL：使用 url() 函数的 URL 值</li> <li>整数/实数：比如 flex 的属性值</li> <li>维度：单位的整数/实数，比如 width 属性的值</li> <li>百分比：大部分维度都支持</li> <li>颜色：比如 background-color 的属性值</li> <li>图片：比如 background-image 的属性值</li> <li>2D位置：比如 background-position 的属性值</li> <li>函数：来自函数的值，比如 transform 的属性值</li></ul></li></ol> <hr> <h4 id="css-支持一批特定的计算型函数"><a href="#css-支持一批特定的计算型函数" class="header-anchor">#</a> CSS 支持一批特定的计算型函数：</h4> <ul><li><strong>calc()</strong>：表达式计算，支持加减乘除四则运算。在针对维度进行计算时，calc() 函数允许不同单位混合运算，这非常的有用。<div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.item-view</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vw - 80rpx - 5px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
// 注意：calc 函数内运算符前后需要空格隔开，否则无效
</code></pre></div></li> <li>max()：表示取两个数中较大的一个</li> <li>min()：表示取两个数中较小的一个</li> <li>clamp()：给定一个范围，超出范围外则使用范围的最大或者最小值</li> <li>toggle()：在规则选中多于一个元素时生效，它会在几个值之间来回切换<div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> <span class="token function">toggle</span><span class="token punctuation">(</span>circle<span class="token punctuation">,</span> square<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
// 让一个列表项的样式圆点和方点间隔出现
</code></pre></div></li> <li>attr()：允许 CSS 接受属性值的控制</li> <li>CSS 的函数还有很多，这里就不一一写出来了</li></ul> <h3 id="at-规则"><a href="#at-规则" class="header-anchor">#</a> at 规则</h3> <p>at-rule 由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束</p> <ul><li><strong>@chartset</strong>：用于提示 CSS 文件使用的字符编码方式，如果被使用，必须出现在最前面</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@chartset</span> <span class="token string">'utf-8'</span><span class="token punctuation">;</span></span>
</code></pre></div><ul><li><strong>@import</strong>：用于引入一个 CSS 文件，除了 @chartset 规则不会被引入，@import 可以引入另一个文件的全部内容</li></ul> <div class="language- extra-class"><pre class="language-text"><code>@import 'common.css'
@import url('base.css');
</code></pre></div><ul><li><strong>@media</strong>：媒体查询，能够对设备的类型，浏览器窗口大小进行判断。在 @media 的区块中，是普通规则列表</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span>
    <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 14pt<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><strong>@keyframes</strong>：用于定义动画关键帧</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{</span>
    <span class="token selector">from</span> <span class="token punctuation">{</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span>
    <span class="token selector">to</span> <span class="token punctuation">{</span> <span class="token property">left</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><strong>@fontface</strong>：用于定义一种字体，iconfont 技术就是利用这个特性来实现的</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> Gentium<span class="token punctuation">;</span>
    <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>http://example.com/fonts/Gentium.woff<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">h1</span> <span class="token punctuation">{</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> Gentium<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><strong>@page</strong>：用于页面打印的时候修改页面的 CSS 属性</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@page</span></span> <span class="token punctuation">{</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><strong>@counter-style</strong>：用于定义列表的表现</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@counter-style</span> triangle</span> <span class="token punctuation">{</span>
    <span class="token property">system</span><span class="token punctuation">:</span> cyclic<span class="token punctuation">;</span>
    <span class="token property">symbols</span><span class="token punctuation">:</span> ‣<span class="token punctuation">;</span>
    <span class="token property">suffix</span><span class="token punctuation">:</span> <span class="token string">' '</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><strong>@support</strong>：检查环境的特性，它与 @media 比较类似</li> <li><strong>@namespace</strong>：用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全部带上特定的命名空间</li> <li><strong>@viewport</strong>：用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 HTML 的 meta 代替</li> <li>其他：除了以上这些，还有目前不太推荐使用的 at 规则
<ul><li>@color-profile：是 SVG1.0 引入的 CSS 特性，但是实现状况不怎么好</li> <li>@document：还没讨论清楚，被推迟到了 CSS4 中</li> <li>@font-feature-values</li></ul></li></ul> <h2 id="选择器-2"><a href="#选择器-2" class="header-anchor">#</a> 选择器</h2> <h3 id="简述"><a href="#简述" class="header-anchor">#</a> 简述</h3> <p>选择器是由 CSS 最先引入的一个机制（但随着 document.querySelector 等 API 的加入，选择器已经不仅仅是 CSS 的一部分了）</p> <p><strong>选择器的基本意义是：根据一些特征，选中元素的一批元素</strong></p> <p>把选择器的结构分一下类，那么由简单到复杂可以分成：</p> <ul><li>简单选择器：针对某一特征判断是否选中元素</li> <li>复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素</li> <li>复杂选择器：由  空格, &gt;, ~, +, || 等符号连接的复合选择器，根据父元素或者前序元素检查单个元素</li> <li>选择器列表：由逗号分隔的复杂选择器，表示「或」的关系</li></ul> <p><img src="https://static001.geekbang.org/resource/image/4c/ce/4c9ac78870342dc802137ea9c848c0ce.png" alt=""> <em>伪类选择器：一系列由 CSS 规定好的选择器，它们以冒号开头，伪类有普通型和函数型</em></p> <ul><li>简单选择器</li> <li>伪元素选择器（目前兼容性良好的几个）
<ul><li>::first-line：选中元素的第一行</li> <li>::first-letter：选中元素的第一个字母</li> <li>::before：在元素内容之前插入一个虚拟的元素（须指定 content 属性才会生效）</li> <li>::after：在元素内容之后插入一个虚拟的元素（须指定 content 属性才会生效）</li></ul></li></ul> <h3 id="解析方式"><a href="#解析方式" class="header-anchor">#</a> <strong>解析方式</strong></h3> <p>选择器的解析方式是从右往左解析的</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.content .item-view img</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">clac</span><span class="token punctuation">(</span>100vw - 20px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
// 浏览器在解析时，先会找到 img 标签的元素，然后继续向上查找验证
</code></pre></div><h3 id="选择器权重"><a href="#选择器权重" class="header-anchor">#</a> <strong>选择器权重</strong></h3> <ul><li><strong>!important</strong>：最高</li> <li><strong>标签样式</strong>：第二高</li> <li><strong>id 选择器</strong>：+100</li> <li><strong>class、属性、伪类</strong>：+10</li> <li><strong>类型、伪元素</strong>：+1</li> <li><strong>全体选择器</strong>：+0</li> <li>相同权重按顺序覆盖</li></ul> <h2 id="盒子模型"><a href="#盒子模型" class="header-anchor">#</a> 盒子模型</h2> <p>CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：<strong>边距，边框，填充，和实际内容</strong>*。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。</p> <p><img src="https://img.kancloud.cn/93/6a/936ad25c180b4571adf8931c53cc4fc3_500x500.png" alt=""></p> <ul><li><p><strong>标准盒子模型</strong>：宽高 = 内容区的宽高</p></li> <li><p><strong>低版本 IE 盒子模型</strong>：宽高 = 内容区 + padding + border</p></li> <li><p>box-sizing ：用来设置 width, height 的作用对象的</p> <ul><li>content-box：内容区（默认，标准盒子模型）</li> <li>padding-box：内容区 + padding</li> <li>border-box：内容区 + padding + border</li> <li>inherit：规定应从父元素继承 box-sizing 属性的值</li></ul></li></ul> <hr> <h4 id="一般情况下-都建议使用低版本-ie-盒子模型-因为这更符合我们对现实盒子的认知理解。"><a href="#一般情况下-都建议使用低版本-ie-盒子模型-因为这更符合我们对现实盒子的认知理解。" class="header-anchor">#</a> <strong>一般情况下，都建议使用低版本 IE 盒子模型，因为这更符合我们对现实盒子的认知理解。</strong></h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">// 最佳实践方法（继承的方式）
html</span> <span class="token punctuation">{</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">*,
*::before, 
*::after</span> <span class="token punctuation">{</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>关于最佳实践的解释：<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/" target="_blank" rel="noopener noreferrer">传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>假设 html 中的某个区块内需要使用不一样的盒子模型，这时候继承的方式就可以很好的切换盒子模型了</p></blockquote> <h2 id="布局"><a href="#布局" class="header-anchor">#</a> 布局</h2> <h3 id="常见布局"><a href="#常见布局" class="header-anchor">#</a> 常见布局</h3> <ul><li>float（浮动布局）</li> <li>position（定位布局）
<ul><li>relative：相对定位 - 相对于块级元素或行内块元素自身位置进行定位</li> <li>absolute：绝对定位 - 相对于最近的已定位的父级元素（relative, absolute, fixed）进行定位，默认是相对于 body</li> <li>fixed：悬浮定位 - 相对于屏幕视口进行定位（祖先元素不能设置 transform 属性为非 none，否则会以该祖先元素进行定位）<a href="https://www.imooc.com/article/67784" target="_blank" rel="noopener noreferrer">传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>table（表格布局）</li></ul> <h3 id="flex-布局"><a href="#flex-布局" class="header-anchor">#</a> flex 布局</h3> <blockquote><p>详细内容 - <a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="noopener noreferrer">阮一峰的网络日志<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071003.jpg" alt="兼容性">
webkit 内核的浏览器必须加上 -webkit-</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span> // 行内元素也可以使用 flex 布局
    <span class="token property">display</span><span class="token punctuation">:</span> -webkit-flex<span class="token punctuation">;</span> <span class="token comment">/* Safari */</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>注意：设置为 flex 布局之后，子元素的 float、clear 和 vertical-align 属性都会无效</p></blockquote> <h4 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h4> <p>flex 布局支持横向和纵向，水平方向称为「主轴」，垂直方向称为「交叉轴」。
因而 flex 又支持反向排布，所以又有主轴的开始结束位置，交叉轴的开始结束位置，可以想象成一个 xy 坐标轴。</p> <h4 id="容器上的属性"><a href="#容器上的属性" class="header-anchor">#</a> 容器上的属性</h4> <ul><li><p>flex-direction（排列方向）</p> <ul><li>row：默认值，主轴为水平方向，起点在左端</li> <li>row-reverse：主轴为水平方向，起点在右端</li> <li>column：主轴为垂直方向，起点在上沿</li> <li>column-reverse：主轴为垂直方向，起点在下沿</li></ul></li> <li><p>flex-wrap（换行方式）</p> <ul><li>nowarp：默认值，不换行，所有 item 挤在一行里</li> <li>warp：换行</li> <li>wrap-reverse：换行，且第一行在下方</li></ul></li> <li><p>flex-flow（为前两个的复合属性）</p></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
    <span class="token property">flex-flow</span><span class="token punctuation">:</span> row nowrap<span class="token punctuation">;</span>  // 默认值
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>justify-content（主轴上的对齐方式，以 row 为例）</p> <ul><li>flex-start：默认值，左对齐</li> <li>flex-end：右对齐</li> <li>center：水平居中对齐</li> <li>space-between：两端对齐，item 之间间隔相等</li> <li>space-around：两端对齐，item 两侧间隔相等，因此一般 item 之间间隔会大一倍</li></ul></li> <li><p>align-items（交叉轴的对齐方式，以 column为例）</p> <ul><li>stretch：默认值，如果 item 未设置高度或者设为 auto，则 item 的高度占满容器的高度</li> <li>flex-start：顶端对齐</li> <li>flex-end：低端对齐</li> <li>center：垂直居中对齐</li> <li>baseline：以第一个 item 的第一行文字基线对齐</li></ul></li> <li><p>align-content（多根轴线的对齐方式，只对轴线起作用，不针对每个 item，如果只有一根轴线，该属性不起作用）</p> <ul><li>stretch：默认值，轴线占满容器高度</li> <li>flex-start：与交叉轴起点对齐</li> <li>flex-end：与交叉轴的终点对齐</li> <li>center：与交叉轴的中点对齐</li> <li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布</li> <li>space-around：两端对齐，轴线两侧间隔相等，因此一般轴线之间间隔会大一倍</li></ul></li></ul> <h4 id="item-上的属性"><a href="#item-上的属性" class="header-anchor">#</a> item 上的属性</h4> <ul><li><p>order（设置 item 的排列顺序）</p> <ul><li>&lt;integer&gt;：数值越小，排列越靠前，默认为 0，可为负数</li></ul></li> <li><p>flex-grow（设置 item 的放大比例）</p> <ul><li>&lt;integer&gt;：默认为 0，即如果存在剩余空间也不放大。如果所有 item 的 flex-grow 属性都为 1，则均分剩余空间。</li></ul></li> <li><p>flex-shrink（设置 item 的缩小比例）</p> <ul><li>&lt;integer&gt;：默认为 1，即如空间不足，该 item 将缩小。设置为 0 不会缩小，负数对该属性无效</li></ul></li> <li><p>flex-basis（在分配多余空间之前，设置 item 占据的主轴空间）</p> <ul><li>auto，默认值，即 item 的本来大小</li> <li>&lt;length&gt;：可以设置为 width 一样的值，比如 10px、20%等，则 item 将占据固定空间</li></ul></li> <li><p>flex（是 grow、shrink、basis 的简写，建议优先使用这个属性，因为浏览器会推算相关值）</p> <ul><li>0 1 auto：默认值，后两个属性可选</li> <li>auto：快捷键，相当于 1 1 auto</li> <li>none：快捷键，相当于 0 0 auto</li></ul></li> <li><p>align-self（允许 item 可以有与其他 item 不一样的对齐方式，可覆盖 align-items）</p> <ul><li>auto：默认值，继承容器的 align-items 属性</li> <li>stretch：如果 item 未设置高度或者设为 auto，则 item 的高度占满容器的高度</li> <li>flex-start：顶端对齐</li> <li>flex-end：低端对齐</li> <li>center：垂直居中对齐</li> <li>baseline：以第一个 item 的第一行文字基线对齐</li></ul></li></ul> <h3 id="网格布局"><a href="#网格布局" class="header-anchor">#</a> 网格布局</h3> <p><a href="http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html" target="_blank" rel="noopener noreferrer">传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="非布局样式"><a href="#非布局样式" class="header-anchor">#</a> 非布局样式</h2> <h3 id="字体"><a href="#字体" class="header-anchor">#</a> 字体</h3> <div class="language-css extra-class"><pre class="language-css"><code>// 字体族，从左往右寻找渲染字符
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;PingFang SC&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Microsoft Yahei&quot;</span><span class="token punctuation">,</span> serif<span class="token punctuation">,</span> monospace
</code></pre></div><h3 id="行高"><a href="#行高" class="header-anchor">#</a> 行高</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">line-height</span><span class="token punctuation">:</span>  // 设置行高，元素会相对于父元素垂直居中 [传送门]<span class="token punctuation">(</span><span class="token property">https</span><span class="token punctuation">:</span>//www.w3school.com.cn/cssref/pr_dim_line-height.asp<span class="token punctuation">)</span>
<span class="token property">vertical-align</span><span class="token punctuation">:</span>  // 设置垂直对齐方式 [传送门]<span class="token punctuation">(</span><span class="token property">https</span><span class="token punctuation">:</span>//www.w3school.com.cn/css/pr_pos_vertical-align.asp<span class="token punctuation">)</span>
</code></pre></div><h3 id="背景"><a href="#背景" class="header-anchor">#</a> 背景</h3> <div class="language-css extra-class"><pre class="language-css"><code>背景颜色
渐变色背景 
多背景叠加（CSS3）
背景图片和属性（雪碧图）  // 减少http 请求
base64 和性能优化  // 针对小图标<span class="token punctuation">,</span> 减少http 请求
多分辨率适配   // background-size 压缩图片
</code></pre></div><h3 id="边框"><a href="#边框" class="header-anchor">#</a> 边框</h3> <div class="language-css extra-class"><pre class="language-css"><code>border
    - 属性：大小 类型 颜色
    - 边框背景图
    - 边框衔接（三角形...）
outline  // 轮廓线，在 border 外围，不会占据空间
</code></pre></div><h3 id="滚动"><a href="#滚动" class="header-anchor">#</a> 滚动</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">overflow</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>  // 默认值
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>  // 溢出部分隐藏
<span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span>  // 溢价部分可滚动查看（始终显示）
<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>  // 如果溢价，可滚动查看
</code></pre></div><h3 id="换行"><a href="#换行" class="header-anchor">#</a> <strong>换行</strong></h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token function">word-wrap</span><span class="token punctuation">(</span> <span class="token property">css3</span><span class="token punctuation">:</span> overflow-wrap<span class="token punctuation">)</span>  // 通过换行控制是否保留单词
word-break  // 针对多字节文字
white-space  // 空白处是否断行
// 可组合使用
</code></pre></div><h2 id="效果属性"><a href="#效果属性" class="header-anchor">#</a> 效果属性</h2> <h3 id="box-shadow-投影"><a href="#box-shadow-投影" class="header-anchor">#</a> <strong>box-shadow</strong>：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow" target="_blank" rel="noopener noreferrer">投影<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <div class="language- extra-class"><pre><code>- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果（如：画一只机器猫）
</code></pre></div><h3 id="text-shadow-投影-文字"><a href="#text-shadow-投影-文字" class="header-anchor">#</a> <strong>text-shadow</strong>：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow" target="_blank" rel="noopener noreferrer">投影-文字<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <div class="language- extra-class"><pre><code>- 立体感
- 印刷品质感
</code></pre></div><h3 id="border-radius-边框圆角"><a href="#border-radius-边框圆角" class="header-anchor">#</a> <strong>border-radius</strong>： <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius" target="_blank" rel="noopener noreferrer">边框圆角<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <div class="language- extra-class"><pre><code>- 圆角矩形
- 圆形
- 半圆 / 扇形
- 一些奇怪的角角
</code></pre></div><h3 id="background-背景"><a href="#background-背景" class="header-anchor">#</a> <strong>background</strong>：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background" target="_blank" rel="noopener noreferrer">背景<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <div class="language- extra-class"><pre><code>- 纹理、图案
- 渐变
- 雪碧图动画
- 背景图尺寸适应
</code></pre></div><h3 id="clip-path-裁剪"><a href="#clip-path-裁剪" class="header-anchor">#</a> <strong>clip-path</strong>：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path" target="_blank" rel="noopener noreferrer">裁剪<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <div class="language- extra-class"><pre><code>- 对容器进行裁剪（可配合 svg 进行裁剪）
- 动画
- 常见的几何图形
- 自定义路径
</code></pre></div><h3 id="transform-变换"><a href="#transform-变换" class="header-anchor">#</a> <strong>transform</strong>：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform" target="_blank" rel="noopener noreferrer">变换<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <div class="language- extra-class"><pre><code>- perspective: 500px;  // 设置 z 坐标轴的高度
- transform-style: preserve-3d;  // 3D 变换
- translate 位移
- scale 缩放
- rotate 翻转
- skew 倾斜
</code></pre></div><h2 id="预处理器"><a href="#预处理器" class="header-anchor">#</a> 预处理器</h2> <h3 id="scss"><a href="#scss" class="header-anchor">#</a> <strong>scss</strong></h3> <blockquote><p>只列出常用的几个用法，深入学习 <a href="https://www.sass.hk/guide/" target="_blank" rel="noopener noreferrer">传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <ul><li>嵌套规则</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#app</span><span class="token punctuation">{</span>
    <span class="token selector">.nav-view</span><span class="token punctuation">{</span>
        <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">p</span><span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">a</span><span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token selector">;
        &amp;:hover</span><span class="token punctuation">{</span>    // &amp; 表示父级选择器
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>变量</li></ul> <div class="language-css extra-class"><pre class="language-css"><code>$<span class="token property">c-theme</span><span class="token punctuation">:</span> blue<span class="token selector">;  // 定义
p</span><span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> $c-theme<span class="token punctuation">;</span>  // 引用
<span class="token punctuation">}</span>
</code></pre></div><ul><li>混合器</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@mixin</span> radius-large</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
    <span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
    <span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@mixin</span> <span class="token function">whh</span><span class="token punctuation">(</span>$<span class="token property">w</span><span class="token punctuation">:</span> 100px<span class="token punctuation">,</span> $<span class="token property">h</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> $w<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> $h<span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> $h<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">// 引用
.content-view</span><span class="token punctuation">{</span>
    <span class="token atrule"><span class="token rule">@include</span> <span class="token function">whh</span><span class="token punctuation">(</span>200px<span class="token punctuation">,</span> 300px<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
    <span class="token atrule"><span class="token rule">@include</span> radius-large<span class="token punctuation">;</span></span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>继承</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.border-error</span><span class="token punctuation">{</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-success</span><span class="token punctuation">{</span>
    <span class="token atrule"><span class="token rule">@extend</span> .border-error<span class="token punctuation">;</span></span>
    <span class="token property">border-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="less"><a href="#less" class="header-anchor">#</a> <strong>less</strong></h3> <blockquote><p>只列出常用的几个用法，深入学习 <a href="https://less.bootcss.com/" target="_blank" rel="noopener noreferrer">传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <ul><li>嵌套规则（和 scss 差不多）</li> <li>变量</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@c-theme</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span></span>
<span class="token selector">p</span><span class="token punctuation">{</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@c-theme</span><span class="token punctuation">;</span></span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>混合器</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.radius-large</span> <span class="token punctuation">{</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
    <span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
    <span class="token property">-moz-border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
.<span class="token function">whh</span><span class="token punctuation">(</span><span class="token atrule"><span class="token rule">@w</span><span class="token punctuation">:</span> 100px<span class="token punctuation">,</span> @<span class="token property">h</span><span class="token punctuation">:</span> 100px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@w</span><span class="token punctuation">;</span></span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@h</span><span class="token punctuation">;</span></span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token atrule"><span class="token rule">@h</span><span class="token punctuation">;</span></span>
<span class="token punctuation">}</span>
<span class="token selector">// 引用
.content-view</span><span class="token punctuation">{</span>
    .<span class="token function">whh</span><span class="token punctuation">(</span>200px<span class="token punctuation">,</span> 300px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    .<span class="token function">radius-large</span><span class="token punctuation">(</span><span class="token punctuation">)</span>；
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">7/15/2021, 4:00:22 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/learn/css/magic.html">神奇的 CSS</a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.0696c23a.js" defer></script><script src="/assets/js/2.96f039f8.js" defer></script><script src="/assets/js/13.dce50cfa.js" defer></script>
  </body>
</html>
